<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Leap Motion / WebSockets</title>
    <script type="text/javascript" src="widgets/AnalogDisplay.js"></script>
    <style>
  * { font-family:tahoma; font-size:12px; padding:0px; margin:0px; }
  p { line-height:18px; }
    </style>
    <script type="text/javascript">
  var response = {};
  var displayRoll;
  var displayPitch;
  var displayYaw;
  var statusFld;
  
  window.onload = function() {
    displayRoll  = new AnalogDisplay('rollCanvas',  100, 90,  30,  1, true, 40, -90);
    displayPitch = new AnalogDisplay('pitchCanvas', 100, 90,  30,  1, true, 40, -90);
    displayYaw   = new AnalogDisplay('yawCanvas',   100, 90,  30,  1, true, 40, -90);
    statusFld = document.getElementById("status");
    
    displayRoll.setValue(0);
    displayPitch.setValue(0);
    displayYaw.setValue(0);
  };
    </script>
  </head>
  <body>
    <div>
      <table style="margin: auto;">
        <tr>
          <td valign="top"><h2>Leap Motion on WebSocket</h2></td>
        </tr>
        <tr>
          <td align="left" colspan="3">
            <div id="status" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 80px;">
              <!--i>Status will go here when needed...</i-->
            </div>
          </td>
        </tr>
        <tr>
          <td valign="top" align="right" colspan="3"><a href="" onclick="javascript:resetStatus(); return false;" title="Clear status board"><small>Reset Status</small></a></td>
        </tr>
        <tr>
          <td align="center" valign="top">
            <canvas id="rollCanvas" width="240" height="220" title="Roll value"></canvas>
          </td>
          <td align="center" valign="top">
            <canvas id="pitchCanvas" width="240" height="220" title="Pitch value"></canvas>
          </td>
          <td align="center" valign="top">
            <canvas id="yawCanvas" width="240" height="220" title="Yaw value"></canvas>
          </td>
        </tr>
        <tr>
          <td align="center" valign="top">Roll</td>
          <td align="center" valign="top">Pitch</td>
          <td align="center" valign="top">Yaw</td>
        </tr>
      </table>  
    </div>
    <hr>
    <script src="./lm.client.js"></script>
  </body>
</html>
